<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/total.css">
    <link rel="stylesheet" href="./font_kx9c3mbtxm/iconfont.css">

    <!-- 轮播swiper -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>

</head>

<body>
    <!-- 首页头部注册部分 -->
    <div class="header-shen">
        <div class="header">
            <ul class="fl">
                <li><a href="reg.html"><span class="iconfont icon-gouwuche"></span></a></li>
                <span>|</span>
                <li><a href="./login.html">你好，未登录<a></li>
                <span>|</span>
                <li class="header1"><a href="./reg.html">免费注册</a></li>
            </ul>
        </div>
    </div>
    <!-- 导航条部分 -->
    <div class="logo-shen">
        <div class="logo">
            <ul class="sub">
                <a href=""><img src="./imgs/logo.jpg" alt=""></a>
                <a href="#">选择购买<span>∨</span></a>
                <a href="./index.html">首页</a>
                <a href="">精选品牌</a>
                <a href="">越境专题</a>
                <a href="#">关于我们<span>∨</span></a>
                <!-- <a href=""><input type="text" value="输入框"></a> -->
            </ul>
            <ul class="wss" style="width: 80px;">
                <li>头发洗护</li>
                <li>身体洗护</li>
                <li>面部洗护</li>
                <li>母婴洗护</li>
                <li>室内香氛</li>
                <li>居家清洁</li>
                <li>寝浴用品</li>
                <li>仪器工具</li>
            </ul>
            <ul class="wbb" style="width: 80px;">
                <li>品牌主张</li>
                <li>创始人故事</li>
                <li>联系我们</li>
            </ul>
            <form action="" class="logo-biao">
                <input type="text" value="输入框"><span class="iconfont icon-sousuo"></span>
            </form>
        </div>

        <!-- 轮播图 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <img class="swiper-slide" src="./imgs/lb1.jpg">
                <img class="swiper-slide" src="./imgs/lb2.png">
                <!-- <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div> -->
            </div>


            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>

    </div>

    <!-- 图标导航 -->
    <div class="nav-shen">
        <div class="nav">
            <ul class="nav1">
                <a href=""><img src="./imgs/t1.png" alt=""><span>头发洗护</span></a>
                <a href=""><img src="./imgs/t2.png" alt=""><span>身体洗护</span></a>
                <a href=""><img src="./imgs/t3.png" alt=""><span>面部洗护</span></a>
                <a href=""><img src="./imgs/t4.png" alt=""><span>母婴洗护</span></a>
                <a href=""><img src="./imgs/t5.png" alt=""><span>室内香氛</span></a>
                <a href=""><img src="./imgs/t6.png" alt=""><span>居家清洁</span></a>
                <a href=""><img src="./imgs/t7.png" alt=""><span>寝浴用品</span></a>
                <a href=""><img src="./imgs/t8.png" alt=""><span>仪器工具</span></a>
            </ul>
        </div>
    </div>

    <!-- 提示信息栏 -->
    <div class="hint-shen">
        <div class="hint">
            <img src="./imgs/hint1.jpg" alt="">
            <img src="./imgs/hint2.jpg" alt="" class="hint3">
        </div>
    </div>

    <!-- 商品列表 -->
    <div class="goods-shen">
        <div class="goods">
            <ul class="goodss">
                <!-- <li class="goods1"><img src="./imgs/gs1.png" alt=""></li>
                <li class="goods2"><img src="./imgs/gs2.jpg" alt=""></li>
                <li class="goods1"><img src="./imgs/gs3.png" alt=""></li>
                <li class="goods2"><img src="./imgs/gs4.png" alt=""></li>
                <li class="goods1"><img src="./imgs/gs5.png" alt=""></li>
                <li class="goods2"><img src="./imgs/gs6.jpg" alt=""></li> -->
            </ul>
        </div>
    </div>
    <!-- 品牌精选长图部分 -->
    <div class="cons-shen">
        <div class="cons">
            <ul class="conss">
                <!-- <li></li>
                <li></li>
                <li></li> -->
            </ul>
        </div>
    </div>
    <!-- 页面底部精选洗护商品 -->
    <div class="mes-shen">
        <div class="mes">
            <ul class="mess">
                <!-- <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li> -->
            </ul>
        </div>
    </div>

    <div class="foot-shen">
        <div class="foots">
            <div class="foot">
                <div class="item foot1">
                    <div>购物指南</div>
                    <div>会员说明</div>
                    <div>积分/优惠券</div>
                    <div>常见问题</div>
                </div>
                <div class="item">
                    <div>馥境保障</div>
                    <div>跨境直邮</div>
                    <div>品牌授权</div>
                    <div>正品保证</div>
                </div>
                <div class="item">
                    <div>物流配送</div>
                    <div>运费标准</div>
                    <div>物流周期</div>
                </div>
                <div class="item">
                    <div>售后服务</div>
                    <div>订单取消</div>
                    <div>退换货说明</div>
                    <div>消费者保障</div>
                </div>
                <div class="item foot2">
                    <div>关于我们</div>
                    <div>品牌理念</div>
                    <div>创始人故事</div>
                    <div>联系我们</div>
                    <div>营业执照</div>
                </div>
                <div class="footss">
                    <img src="./imgs/bot-code.jpeg" alt="">
                    <ul>
                        <li class="footss1">扫码关注公众号</li>
                        <li>021-58909921</li>
                        <li>9:30-22:30(7*13小时)</li>

                </div>
            </div>
        </div>
        <div class="footd">
            <div class="footdd">
                <ul class="btnss">
                    <li class="ql">品牌主张</li>
                    <span>|</span>
                    <li>创始人故事</li>
                    <span>|</span>
                    <li>联系我们</li>
                    <span>|</span>
                    <li>Copyright&copy;馥境2019</li>
                    <span>|</span>
                    <li>All Rights Reserved</li>
                    <span>|</span>
                    <li>浙ICP备15043443号-1</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        //轮播图js代码
        //轮播图初始化  需要在页面上轮播图结构出现以后调用
        var mySwiper = new Swiper('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项
            autoplay: true, //自动轮播 默认3秒
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
                // el: '.swiper-scrollbar',
            },
        })

    </script>
    <!-- 商品列表 -->
    <script src="./js/axios.min.js"></script>
    <script src="./js/api.js"></script>
    <script src="./js/index.js"></script>

</body>

</html>